<template>
	<view>
		<view class="newjourney">
			<view class="bg">
				<image src="../../../static/images/bg.jpg" mode="widthFix"></image>
			</view>

			<view class="new-con">
				<view class="quickNav">
					<quickNav></quickNav>
				</view>

				<view class="newSwiper">
					<newSwiper></newSwiper>
				</view>

				<view class="video-seat">
					<video src="https://www.laijunlin.xyz/static/home/xzc/1.mp4" 
					poster="https://www.laijunlin.xyz/static/home/xzc/1.jpg"
						:controls="true" :muted="false" :autoplay="false" object-fit="" :show-center-play-btn="true"
						play-btn-position="center" :enable-play-gesture="true" :show-mute-btn="true"></video>

					<view class="vid-title">我眼中的习近平 | 没有小我，只有大我 祖国万岁</view>

				</view>


				<!-- new-title1 -->
				<view v-for="item in xzc" :key="item.id">
					<view class="new-title">
						<newTitle>{{item.title}}</newTitle>
					</view>
					<view class="recommend">
						<recommend :list="item.data"></recommend>
					</view>
				</view>



				<!-- new-title 视频 -->
				<view class="new-title">
					<newTitle>以文学之光，铸时代之魂</newTitle>
				</view>
				<view class="video-seat">
					<video src="https://www.laijunlin.xyz/static/home/xzc/2.mp4" 
					poster="https://www.laijunlin.xyz/static/home/xzc/2.jpg"
						:controls="true" :muted="false" :autoplay="false" object-fit="" :show-center-play-btn="true"
						play-btn-position="center" :enable-play-gesture="true" :show-mute-btn="true"></video>

					<view class="vid-title">“永远跟 党 走•奋进新征程” 五一 特别节目</view>

				</view>


				<!-- new-title3 -->
				<view class="new-title">
					<newTitle>{{city.title}}</newTitle>
				</view>
				<view class="recommend">
					<recommend :list="city.data">
						<view class="more" @click="news">查看更多</view>
					</recommend>
				</view>

				<view class="footer"></view>

			</view>

		</view>
	</view>
</template>

<script>
	const xzc = require('@/common/home/xzc.json').xzc;

	import quickNav from './quick-nav/quick-nav.vue'
	import newSwiper from './new-swiper/new-swiper.vue'
	import recommend from '../recommend/recommend.vue'
	import newTitle from './new-title/new-title.vue'

	export default {
		data() {
			return {
				xzc: [],
				city: {
					"title": "乡村振兴",
					"data": [{
							"id": 1,
							"cover_img": "https://www.laijunlin.xyz/static/home/xzc/zx/cover/1.jpg",
							"time": 1650729600,
							"title": "农业20类可申报补贴项目，看看你的项目可以吗？",
							"user_img": "https://www.laijunlin.xyz/static/home/userpic/1.jpg",
							"user_name": "北街沫雨",
							"video_url": "https://www.laijunlin.xyz/static/home/xzc/zx/1.mp4",
							"isguanzhu": 1,
							"pinglun": "2222",
							"shoucang": "1111",
							"zhuanfa": "3333"
						}, {
							"id": 2,
							"cover_img": "https://www.laijunlin.xyz/static/home/xzc/zx/cover/2.jpg",
							"time": 1650729600,
							"title": "乡村振兴的9种发展模式 乡村振兴 三农 旅游 农村 涨知识",
							"user_img": "https://www.laijunlin.xyz/static/home/userpic/2.jpg",
							"user_name": "好久不见",
							"video_url": "https://www.laijunlin.xyz/static/home/xzc/zx/2.mp4",
							"isguanzhu": 1,
							"pinglun": "2222",
							"shoucang": "1111",
							"zhuanfa": "3333"
						},
						{
							"id": 3,
							"cover_img": "https://www.laijunlin.xyz/static/home/xzc/zx/cover/3.jpg",
							"time": 1650729600,
							"title": "乡村振兴但不能向农民要一分钱%乡村振兴 农村 三农",
							"user_img": "https://www.laijunlin.xyz/static/home/userpic/3.jpg",
							"user_name": "青桥细雨",
							"video_url": "https://www.laijunlin.xyz/static/home/xzc/zx/3.mp4",
							"isguanzhu": 1,
							"pinglun": "2222",
							"shoucang": "1111",
							"zhuanfa": "3333"
						},
						{
							"id": 4,
							"cover_img": "https://www.laijunlin.xyz/static/home/xzc/zx/cover/4.jpg",
							"time": 1650729600,
							"title": "旅游到一定程度就会有极限，核心还得做产业！袁家村是怎么把乡村旅游做成了产业？",
							"user_img": "https://www.laijunlin.xyz/static/home/userpic/4.jpg",
							"user_name": "冷酒凉心",
							"video_url": "https://www.laijunlin.xyz/static/home/xzc/zx/4.mp4",
							"isguanzhu": 1,
							"pinglun": "2222",
							"shoucang": "1111",
							"zhuanfa": "3333"
						}
					]
				},

			}
		},
		components: {
			quickNav,
			newSwiper,
			recommend,
			newTitle
		},
		mounted() {
			this.xzc = xzc;
		},
		methods: {
			news() {
				uni.showToast({
					title: '没有更多了',
					duration: 1500,
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.newjourney {
		.bg {
			image {
				width: 100%;
				vertical-align: middle;
			}
		}

		.new-con {
			background-color: #dd1226;

			.video-seat {
				padding: 0 20rpx;
				width: 100%;
				height: 470rpx;
				box-sizing: border-box;

				video {
					width: 100%;
					height: 400rpx;
					border-radius: 5px;
				}

				.vid-title {
					height: 40rpx;
					padding: 0 10rpx;
					box-sizing: border-box;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 20rpx 0;
					font-size: 28rpx;
				}
			}

			.recommend {
				padding: 0 20rpx;
			}

		}

		.recommend {
			.more {
				width: 100%;
				color: #fff;
				font-size: 30rpx;
				height: 80rpx;
				background-color: rgba(0, 0, 0, .3);
				text-align: center;
				line-height: 80rpx;
				border-radius: 5px;
			}
		}

		.footer {
			width: 100%;
			height: 30rpx;
		}
	}
</style>
